/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-03-22 09:38:09
 * @LastEditors: voanit
 * @LastEditTime: 2022-03-22 10:58:13
 */
import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
export default function Header() {
  const [name, setName] = useState('')
  const dispatch = useDispatch()
  return (
    <header className="header">
      <h1>todos</h1>=={name}
      <input
        onKeyUp={(e) => {
          if (e.keyCode === 13) {
            dispatch({
              type: 'todo/add',
              payload: name,
            })
            setName('')
          }
        }}
        className="new-todo"
        value={name}
        onChange={(e) => {
          setName(e.target.value.trim())
        }}
        placeholder="接下来打算做点啥?"
        autoFocus
      />
    </header>
  )
}
